<template>
  <div>
    <div style="margin-top: 20px; float: right">
      <el-button type="danger" style="margin-right: 50px" @click="re">充值会员</el-button>
    </div>
    <el-dialog title="VIP充值" v-model="dialogVisible2" width="100%" :before-close="handleClose">
      <div style="margin-top: 2%; margin-left: 2%">
        <div
          style="
            width: 100%;
            height: 150px;
            background-color: #333333;
            margin-left: 3%;
            margin-top: -1%;
            text-align: center;
          "
        >
          <span
            style="
              color: white;
              font-size: larger;
              display: flex;
              float: left;
              margin-top: 30px;
              margin-left: 20px;
            "
            >我的会员</span
          >
          <span
            style="
              color: orange;
              font-size: x-large;
              display: flex;
              float: left;
              margin-top: 80px;
              margin-left: -70px;
            "
          >
            {{ vip }}
          </span>
        </div>

        <div style="width: 100%; height: 50px; background-color: white">
          <span
            style="font-size: large; display: flex; float: left; color: #333333; font-weight: bold"
            >选择充值套餐</span
          >
        </div>

        <div :style="s4" @click="c1">
          <span style="color: black; font-size: large; margin-top: 2%; margin-left: 3%"
            >连续包月:<br />
            9.9元/月</span
          >
        </div>
        <div :style="s2" @click="c2">
          <span style="color: black; font-size: large; margin-top: 2%; margin-left: 3%"
            >季度会员:<br />
            39.9元/季</span
          >
        </div>
        <div :style="s3" @click="c3">
          <span style="color: black; font-size: large; margin-top: 2%; margin-left: 3%"
            >年度会员:<br />
            109.9元/年</span
          >
        </div>
        <div>
          <el-button type="success" style="width: 50%; height: 50px; margin-top: 50px" @click="pay"
            >立即支付</el-button
          >
        </div>
        <div>
          <el-button type="danger" style="width: 50%; height: 50px; margin-top: 10px" @click="quit"
            >取消支付</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
const dialogVisible2 = ref(false);
const vip = ref('暂无会员LV0');
const s1 = ref(
  'width: 30%;height: 70px;background-color: wheat;display: flex;float: left;margin-left: 2%;',
);
const s2 = ref(
  'width: 30%;height: 70px;background-color: wheat;display: flex;float: left;margin-left: 2%;',
);
const s3 = ref(
  'width: 30%;height: 70px;background-color: wheat;display: flex;float: left;margin-left: 2%;',
);
const s4 = ref(
  'width: 30%;height: 70px;background-color: wheat;display: flex;float: left;margin-left: 2%;',
);
const re = () => {
  dialogVisible2.value = true;
  const uid = JSON.parse(sessionStorage.getItem('uid'));
  const vid = JSON.parse(sessionStorage.getItem('vid'));
  if (vid !== 0) {
    axios.get('api/vip/isVip/' + uid).then(res => {
      if (res.data === 'YES') {
        vip.value = '超级会员LV1';
        s1.value = 'font-size: large;color: red';
      } else {
        vip.value = '会员过期LV1';
      }
    });
  }
};
function c1() {
  s2.value =
    'width: 30%;height: 70px;background-color: wheat;display: flex;float: left;margin-left: 2%;';
  s3.value =
    'width: 30%;height: 70px;background-color: wheat;display: flex;float: left;margin-left: 2%;';
  s4.value =
    'width: 30%;height: 70px;background-color: orange;display: flex;float: left;margin-left: 2%;';
}
const c2 = () => {
  s2.value =
    'width: 30%;height: 70px;background-color: orange;display: flex;float: left;margin-left: 2%;';
  s3.value =
    'width: 30%;height: 70px;background-color: wheat;display: flex;float: left;margin-left: 2%;';
  s4.value =
    'width: 30%;height: 70px;background-color: wheat;display: flex;float: left;margin-left: 2%;';
};
const c3 = () => {
  s2.value =
    'width: 30%;height: 70px;background-color: wheat;display: flex;float: left;margin-left: 2%;';
  s3.value =
    'width: 30%;height: 70px;background-color: orange;display: flex;float: left;margin-left: 2%;';
  s4.value =
    'width: 30%;height: 70px;background-color: wheat;display: flex;float: left;margin-left: 2%;';
};
const quit = () => {
  dialogVisible2.value = false;
};
const pay = () => {
  if (JSON.parse(sessionStorage.getItem('isVip')) === 'YES') {
    ElMessage({
      showClose: true,
      message: '您已是会员，无需充值！',
      type: 'error',
    });
    dialogVisible2.value = false;
  } else {
    axios.get('/api/user/vipPay/' + JSON.parse(sessionStorage.getItem('uid'))).then(res => {
      alert('充值成功！');
      sessionStorage.setItem('vid', JSON.stringify(res.data.vid));
      sessionStorage.setItem('isVip', JSON.stringify('YES'));
      router.go(0);
    });
  }
};
</script>
